<template>
  <div class="layout">
      <Header :Vuetemplate="Vuetemplate"></Header>
    </div>
</template>

<script>
import axios from 'axios'
import Header from './Header'
export default {
  name: 'homepage',
  components:{
      Header,
  },
  data () { 
    return {
        Vuetemplate:[]
    }
  },
  methods:{
        getHomeInfo () {

   /*
    现在用的是本地模拟的接口地址，
    假如代码要上线，肯定不能用固定的接口路径
    那么得把路径替换成api/index.json这种格式，
    上线之前去改动代码是有风险的

    解决方法：
    使用一个转发机制，把api路径下的json文件请求转发到我们本地
    的mock文件夹下就可以了
    vue里提供了一个代理的功能。打开config目录下的index.js文件
    在开发环境里，官方提供了一个proxyTable配置项，我们配置一下
*/
            axios.get('/api/index.json')
                .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc (res) {
                 res =res.data   //拿到数据
                if(res.ret){
                    const data = res.data
                    this.Vuetemplate = data.Vuetemplate
                }
             
            
        }
    },
    mounted () {    //页面挂载之后，执行axios的ajax方法，获取来数据
        this.getHomeInfo()
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>
